<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/jsps/common/tags.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>歌曲列表</title>
    <%@ include file="/jsps/common/header.jsp" %>


	</head>


	<body>
		<div>
			&gt;&gt; 歌曲信息
			
		</div>
		<div class="sme_mainrm">
		<ul class="sme_search01">
		
			<s:form action="list" namespace="/">
		
			
		     歌曲名：
		   <s:textfield cssClass="text" name="helper.name"></s:textfield>
          演唱者/演奏者 ：
              <s:textfield cssClass="text" name="helper.singer"></s:textfield>
            

				<s:hidden name="helper.sortHelper.colIndex" id="index"></s:hidden>
				<s:hidden name="helper.sortHelper.colName" id="colName"></s:hidden>
				<s:hidden name="helper.sortHelper.sortedType" id="colType"></s:hidden>
				<s:hidden name="page.pageNo"></s:hidden>

				 <s:submit value=" 查 询 "></s:submit>
				

			</s:form>
			</ul>
		</div>
	<div>	
		<s:if test="page.content" >
		 <table width="100%" class="sme_newul2" border="0" cellspacing="1" cellpadding="0">
				<tr>
					<th class="sme_newsfist" width="5%">
						序  号
					</th>
					<th class="sme_newsfist" width="25%">
						歌曲名
					</th>
					<th class="sme_newsfist" width="15%">
						演唱者/演奏者 
					</th>
					<th class="sme_newsfist" width="10%">
					
						试听
					</th>
					<th class="sme_newsfist"  width="15%">
						操作
					</th>
				</tr>
				<s:iterator value="page.content">
					<tr>
						<td class="sme_news22">
							<s:property value="id" />
						</td>
						<td class="sme_news22">
							<s:property value="name" />
						</td>
						<td class="sme_news22">
							<s:property value="singer" />
							
						</td>
							<td class="sme_news22">
							<div align="center">
							在线试听</div>
						</td>
						<td class="sme_news22">
<div align="center">
							<a
								href="<s:url action="preModify" namespace="/"/>?song.id=<s:property value="id"/>">修改</a>

							<span class="link" title="删除歌曲"
								onclick="remove('<s:property value="name"/>','<s:property value="id"/>');">
								删除 </span>
</div>
						</td>
					</tr>
					
				</s:iterator>
				<tr>
				<td> <div>
             <a href="<s:url action="input" namespace="/"/>" 
                             target="contentFrame">新增歌曲</a>
          </div></td>
				<td colspan="7"><div class="pagenumber" style="font-size:12px; text-align:right; width:700px; float:right; margin:2px 50px 0 0; padding:0;">
					共
				<span class="page_text">${page.totalRecNum}</span>条&nbsp; 每页
				<span class="page_text">${page.pageSize}</span>条&nbsp; 当前列出 第
				<span class="page_text">${page.startIndex}</span>条 至 第
				<span class="page_text">${page.endIndex}</span>条&nbsp; 第
				<span class="page_text">${page.pageNo}/${page.totalPageNum}</span>页


				&nbsp;|&nbsp;
				<s:if test="page.prePage">
					<span class="link_span" onclick="gotoPage(1);" title="访问首页">首页</span>
				</s:if>
				<s:if test="page.prePage">
					<span class="link_span" onclick="gotoPage(${page.pageNo-1});"
						title="访问第${page.pageNo-1}页">上一页</span>
				</s:if>
				<s:if test="page.nextPage">
					<span class="link_span" onclick="gotoPage(${page.pageNo+1});"
						title="访问第${page.pageNo+1}页">下一页</span>
				</s:if>
				<s:if test="page.nextPage">
					<span class="link_span" onclick="gotoPage(${page.totalPageNum});"
						title="访问末页">末页</span>
				</s:if>

				&nbsp;|&nbsp; 跳转到
				<input type="text" id="pageNo" class="text" size="2"
					style="text-align: right;" onKeyPress="onlyNumber();" />
				页&nbsp;
				<button onclick="gotoPage($('#pageNo').val());"
					style="height:25px;">
					<span style="align:center">跳 转</span>
				</button>
				</div>
				</td>
				</tr>
			</table>
		

			<div id="page_nav">
			

			</div>

		</s:if>
		</div>
		<s:if test="page.content==null">
			<center>
				<div id="no_rec">
					<span class="failMsg">没有符合条件的歌曲记录被找到！</span>
					<button onclick="history.go(-1);">
						返 回
					</button>
				</div>
			</center>
		</s:if>
<table width="100%"></table>
         <iframe name="contentFrame" id="main" src="<s:url action="test" namespace="/"/>?helper.type=古典"  width="500" height="540" frameborder="0" scrolling="no" >
              您的浏览器不支持iframe
         </iframe>
    <iframe name="contentFrame" id="main" src="<s:url action="test" namespace="/"/>?helper.type=流行"  width="500" height="540" frameborder="0" scrolling="no" >
              您的浏览器不支持iframe
         </iframe>
	</body>
	<script type="text/javascript">
	    var cols=new Array("id","name","singer");
	    $(document).ready(           
            function()
            {
               var rIndexCol = $("#index").val();
               //alert(rIndexCol);
               var rtype = $("#colType").val();
              // alert(rtype); 
               if(rtype=="asc")
               {
                 $("th.scol").eq(parseInt(rIndexCol))
                       .append("<img style='margin-left:5px;' src='<c:url value="/pics/side_arrow_up.gif"/>'/>");
               }
               else
                 $("th.scol").eq(parseInt(rIndexCol))
                       .append("<img style='margin-left:5px;' src='<c:url value="/pics/side_arrow_down.gif"/>'/>");
               
               
               $("th.scol").css("cursor","hand")
                      .bind(
                           "mouseover",
                           function(){
                              $(this).css("text-decoration","underline");
                           }
                      )
                     .bind(
                           "mouseout",
                           function(){
                              $(this).css("text-decoration","");
                           }
                      )
                      .bind(
                            "click",
                            function(){
                                var colIndexTemp=$("th.scol").index($(this));
                                var colNameTemp=cols[$("th.scol").index($(this))];
                                var sortedTypeTemp="";
                                if(parseInt(rIndexCol)!= $("th.scol").index($(this)))
                                   sortedTypeTemp="asc";
                                else
                                   sortedTypeTemp=rtype=="asc"?"desc":"asc"
                                
                                //alert(colIndexTemp+"|"+colNameTemp+"|"+sortedTypeTemp);                              
                                $("#index").attr('value',colIndexTemp);
                                $("#colName").attr('value',colNameTemp);
                                $("#colType").attr('value',sortedTypeTemp);
                                $("input[name='pageNo']").attr('value',1);
                                
                                document.forms[0].submit();
                            }
                           );	                                                                                                                            
            }
          
         );
	    function remove(name,id)
        {
          //alert(id + "," + name);
          if(confirm("真的要删除歌曲[" + name + "]吗？"))
             location.href="<s:url action="remove" namespace="/"/>?song.songId="+id;         
        }


         function switchQueryArea()
         {
            $('#query_area').toggle('fast');
            if($('#query_area').css('display')=='none')
               $('#switch_qry').text(' [显示查询选择] ');
            else
               $('#switch_qry').text(' [隐藏查询选择] ');
         }
        function gotoPage(pageNo)
         {
            if(pageNo<1 || pageNo>${page.totalPageNum})
            {
              alert("页面编号输入错误！范围为1-${page.totalPageNum}");
              $('#pageNo').get(0).select();
              return;
            }
            //alert($("input[name='page.pageNo']").val());
            
            $("input[name='page.pageNo']").attr('value',pageNo);
            document.forms[0].submit();
         }
         
         function newQuery()
         {
           $("input[name='page.pageNo']").attr('value','1');
                        return true;
         }
   </script>
</html>
